-<template>
  <view>
    <view class="content">
      <navigator class="list" v-for="(item,index) in 5" :key="index" url="/pages/Index/OrderInfo/OrderInfo">
        <view class="list-item">
          <view class="list-item__container container--right">
            <view class="list-item__header">
              <view class="list-item__icon">
                <view class="list-item__icon-img">
                  <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
                </view>
              </view>
            </view>
            <view class="list-item__content">
              <text class="list-item__content-title u-line-1">活动商品软件服务\信息技术开发</text>
              <text class="list-item__content-note">已选择:规格1/规格3</text>
              <text class="list-item__content-note">数量：2</text>
              <view class="list-item__content-price">
                <text class="list-item__container-t">价格：98.00*2</text>
                <text class="list-item__container-t right">总价：<text style="font-size: 32rpx;">196.00</text></text>
              </view>
            </view>
            <view class="list-item__extra">
              <view class="list-item__extra-text">
                <u-icon name="arrow-right" color="#999" size="28"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="list-item__up">
          <view class="list-item__up_d">
            <text class="list-item__up_l">订单状态：</text>
            <text class="list-item__up_r">未付款</text>
          </view>
        </view>
      </navigator>
    </view>
    <view style="height: 100rpx;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
    
    },
    onLoad(options) {
      
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    .list{
      background-color: #fff;
      margin-top: 24rpx;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        cursor: pointer;
        padding: 32rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .list-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .list-item__icon-img{
                display: block;
                height: 128rpx;
                width: 128rpx;
                margin-right: 20rpx;
                border-radius: 16rpx;
                overflow: hidden;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 28rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .list-item__content-note{
              margin-top: 6rpx;
              font-size: 24rpx;
              overflow: hidden;
            }
            .list-item__content-price{
              margin-top: 6rpx;
              font-size: 24rpx;
              overflow: hidden;
              display: flex;
              .list-item__container-t{
                font-size: 24rpx;
              }
              .right{
                margin-left: auto;
              }
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
          .list-item__extra{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .list-item__extra-text{
              color: #999;
              font-size: 24rpx;
            }
          }
        }
      }
      .list-item__up{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 24rpx;
        padding-right: 32rpx;
        .list-item__up_d{
          display: flex;
          align-items: center;
          .list-item__up_l{
            font-size: 12px;
            text-align: right;
          }
          .list-item__up_r{
            margin:0 34rpx;
            color: #a21d20;
          }
        }
      }
    }
  }
  
</style>